<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getUserAlbum } from '../api/User'
import { getUser } from '../api/User'
import { getCateRecommend, getRecommend } from '../api/home'
import { showToast } from 'vant';
import { viewCount, filters, vidotime } from '../hooks/filters'

export default defineComponent({
  setup() {
    let router = useRouter();
    let route = useRoute();
    let albumList: any = ref(null)
    let userDes: any = ref(null);
    let currentAlbum: any = ref(null);
    let uiMiddleCard: any = ref(null);
    let randomArr:any = ref<Array<Number>>([]);
    let id = route.query.id;
    let userid = route.query.user_id;
    let useractive = route.query.useractive;
    let back: any = (): void => {
      router.push({
        path: '/userdetail',
        query: {
          userid: userid,
          useractive,
        }
      })
    };
    //获取用户专辑数据
    let getUserAlbumFun = (userid: any, page: number) => {
      getUserAlbum(userid, {
        page
      }).then((data) => {
        console.log('用户专辑详情data=>', data)
        albumList.value = data.data
        console.log('用户专辑数据xqalbumList=>', albumList.value)
        currentAlbum.value = albumList.value.list.filter((item: any) => {
          return item.id == id;
        });
        for (var i = 0; i < 999; i++) {
          if (randomArr.value.length >= Number(currentAlbum.value[0].count.count_article)) {
            break;
          }
          let rand: number = Math.floor(Math.random() * (Number(currentAlbum.value[0].count.count_article) - 0));
          if (randomArr.value.includes(rand)) {
            continue;
          }
          else {
            randomArr.value.push(rand);
          };
          // console.log("随机数:", randomArr.value)
        }
        // console.log('1111111', currentAlbum.value);
      });


    };

    let getUserFun = (userid: any) => {
      getUser(userid).then((data) => {
        console.log('用户主页=>', data);
        userDes.value = data.data;
        console.log('用户主页userDes=>', userDes.value);
      })
    };
    let getRecommendFun = () => {
      getRecommend().then((data) => {
        console.log('推荐列表=>', data)
        uiMiddleCard.value = data.data.children
        uiMiddleCard.value = uiMiddleCard._rawValue.filter((item: any) => {
          return item.type == 'uiMiddleCard'
        });


        console.log('推荐列表数组uiMiddleCard=>', uiMiddleCard._rawValue)
      })
    };
       //点击视频
       let click_video = (videoid: any, ) => {
      router.push({
        path: '/videoDes',
        query: {
          aid: videoid,
          userid: userid,
          useractive,
          id:route.query.id,
        }
      })
    };
    const showShare = ref(false);
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];

    const onSelect = (option:any) => {
      showToast(option.name);
      showShare.value = false;
    };
    onMounted(() => {
      getUserAlbumFun(userid, 1);
      getUserFun(userid);//获取用户信息
      getRecommendFun();
    })
    return {
      back,
      currentAlbum,
      userDes,
      viewCount,
      uiMiddleCard,
      randomArr,
      vidotime,
      options,
      onSelect,
      showShare,
      click_video
    }
  }
})
</script>
<template>
  <div class="albumdes" v-if="currentAlbum">
    <div class="float">
      <!-- 顶部导航栏 -->
      <div class="topbar flex-space">
        <span class="iconfont icon-xiangzuojiantou" @click="back"> </span>
        <van-cell  class="iconfont icon-fenxiang3" @click="showShare = true" />
        <!-- <span class="iconfont icon-fenxiang3"></span> -->
      </div>
      <!-- 专辑名称 -->
      <div class="alnumname">{{ currentAlbum[0].title }}</div>
      <!-- 用户头像 -->
      <div class="user" v-if="userDes">
        <div class="userimg">
          <img :src="userDes.avatar" alt="" />
          <div class="smalllogo" v-if="userDes.vip_flag == 1" style="background-color: #fff;">
            <img src="../assets/images/177会员、vip.png" alt="" />
          </div>
        </div>
        <!-- 用户名字 -->
        <div class="username">{{ userDes.username }}</div>
      </div>
    </div>
    <!-- 专辑背景 -->
    <div class="bg">
      <img :src="currentAlbum[0].cover_url+'?param=5y5'" alt="" />
    </div>
    <!-- 专辑浏览量 -->
    <div class="albumcount">作品 {{ viewCount(currentAlbum[0].count.count_article) }} · 浏览
      {{ viewCount(currentAlbum[0].count.count_viewed) }} · 赞 {{ viewCount(currentAlbum[0].count.count_liked) }}</div>
    <!-- 专辑的介绍 -->
    <div class="albumintro">{{ currentAlbum[0].description }}</div>
    <!-- 专辑详细列表 -->
    <div class="albumlist" v-if="randomArr">
      <ul>
        <li v-for="item in randomArr" @click="click_video(uiMiddleCard[item].children[0].model.resource.id)">
          <div class="image">
            <img :src="uiMiddleCard[item].children[0].model.resource.cover+'?param=5y5'" alt="" />
            <div class="timefloat">{{ vidotime(uiMiddleCard[item].children[0].model.resource.duration) }}</div>
          </div>
          <div class="right">
            <div class="des text-cut">{{ uiMiddleCard[item].children[0].model.resource.title }}</div>
            <div class="smalltag" v-for="data in uiMiddleCard[item].children[0].model.resource.categories">
              <span class="count">{{ data.category_name }}-{{ data.sub.category_name }}</span>
              <em></em>
            </div>

          </div>
        </li>
        <p>暂无更多</p>
      </ul>
    </div>
    <van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .van-cell{
  background-color: transparent;
  color:#fff;
  justify-content: flex-end;
  padding-right: 0;
  font-size: 21px;
}
.albumdes {
  position: relative;

  .float {
    position: absolute;
    z-index: 10;
    width: 100%;

    .topbar {
      line-height: 42px;
      padding: 0 15px;

      span {
        font-size: 20px;
        color: #fff;
        font-weight: 600;
      }
    }

    .alnumname {
      padding: 0 20px;
      line-height: 28px;
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      margin-top: 92px;
    }

    .user {
      display: flex;
      padding: 0 20px;

      .userimg {
        position: relative;

        margin-top: 4px;

        img {
          width: 18px;
          height: 18px;
          border-radius: 50%;
        }

        .smalllogo {
          position: absolute;
          left: 11px;
          bottom: 4px;
          background-color: rgb(255, 255, 255);
          border-radius: 50%;
          width: 7px;
          height: 7px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
        }
      }

      .username {
        font-size: 14px;
        color: #fff;
        // font-weight: 600;
        line-height: 27px;
        margin-left: 10px;
      }
    }
  }

  .bg {
    width: 100%;

    img {
      width: 100%;
      height: 203px;
    }
  }

  .albumcount {
    line-height: 27px;
    font-size: 12px;
    color: #999999;
    margin-top: 13px;
    padding: 0 12px;
  }

  .albumintro {
    line-height: 27px;
    font-size: 12px;
    color: #3f3f3f;
    padding: 0 12px;
  }

  .albumlist {
    ul {
      li {
        height: 116px;
        margin: 0 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-color: transparent
        }

        .image {
          position: relative;

          img {
            width: 154px;
            height: 86px;
            border-radius: 5px;
          }

          .timefloat {
            position: absolute;
            bottom: 5px;
            right: 5px;
            color: #fff;
            font-size: 12px;
          }
        }

        .right {
          margin-left: 12px;
          margin-right: 15px;

          .smalltag {
            display: inline-block;
            &:last-child{
              em{
                display: none;
              }
            }
            em {
              display: inline-block;
              width: 1px;
              height: 10px;
              // background-color: #853e3e;
              background-color: #f8f8f8;
              margin: 0 9px;
            }
          }
        }

        .des {
          font-size: 14px;
          color: #2e2e2e;
          line-height: 20px;
          font-weight: 600;
          margin-bottom: 5px;
        }

        .count {
          line-height: 26px;
          font-size: 12px;
          color: #9a9a9a;
        }


      }
    }

    p {
      text-align: center;
      font-size: 14px;
      line-height: 50px;
      color: #bbb7b7;
    }
  }
}</style>